<!-- 搜索 -->
<template>
	<view class="v-search-page">
		<!-- <sunui-navbar   :items="tabList" lineHeight="100rpx" :isCenter="true" :currentIndex="navIndex" padding="20rpx"
			activeColor="rgb(255, 0, 0)" :size="220" activeLineBg="rgb(255, 0, 0)" textAlign="center"
			activeLineWidth="50%" activeDirection="center" activeLineHeight="4rpx" bgColor="#fff"
			 @change="getChange"></sunui-navbar> -->
		<view class=" ">
			<sunui-navbar v-if="classListTab.length" :items="classListTab" lineHeight="80rpx" :isCenter="true"
				:currentIndex="tabIndex" padding="10rpx" :size="150" activeLineBg="#000000" textAlign="center"
				activeColor="#000000" activeLineWidth="45%" bgColor="#fff"  activeDirection="center" activeLineHeight="8rpx" :margin="1"
				@change="getChange"></sunui-navbar>
		</view>
		<!-- 搜索框 -->
		<!--  @click="search()" -->
		<view class="search-content flex">
			<image class="search-img" src="/static/sousuo.jpg"></image>
			<input placeholder="搜索商品" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
				placeholder-style="color:#8F8F8F;" />
			<image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image>
		</view>
		<view class="flex-around v-p-top">
			<view :class="isAllRound == false ? 'colord9' : 'color3'" @click="allRound()">综合</view>
			<view class="flex-align-center" @click="time()">
				<view :class="isTimeClick == false ? 'colord9' : 'color3'">按时间</view>
				<view class="flex-column v-text-icon">
					<text class="iconfont" :class="isTime == false ? 'v-icon-color' : 'v-icon-select'">&#xe627;</text>
					<text class="iconfont icon-top"
						:class="isTime == false && isTimeClick == true ? 'v-icon-select' : 'v-icon-color'">&#xe628;</text>
				</view>
			</view>
			<view class="flex-align-center" @click="sale()">
				<view :class="isSaleClick == false ? 'colord9' : 'color3'">按销售</view>
				<view class="flex-column v-text-icon">
					<text class="iconfont" :class="isSale == false ? 'v-icon-color' : 'v-icon-select'">&#xe627;</text>
					<text class="iconfont icon-top"
						:class="isSale == false && isSaleClick == true ? 'v-icon-select' : 'v-icon-color'">&#xe628;</text>
				</view>
			</view>
			<!-- <view class="v-screen" @click="invoice()">
				筛选
				<text class="iconfont">&#xe621;</text>
			</view> -->
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
			<view class="flex-wrap">
				<block v-for="(i, j) in list" :key="j">
					<view class="v-commodity" @click="toDetail(i.id)">
						<image :src="i.pic_url" class="border10"></image>
						<view class="background-color_FFFFFF " style="padding: 16rpx;">
							<view style="width: 98%;height: 70rpx;" class="font-overflow2 ">{{ i.name }}</view>
							<view class="flex-between v-price">
								<view>￥{{ i.price }}</view>
								<text>销量 {{ totelName(i.sold) }}</text>
							</view>
						</view>
					</view>
				</block>
			</view>
		</mescroll-body>
		<!-- 全部筛选 -->
		<sunui-popup ref="popinvoice">
			<template v-slot:content>
				<view class="v-pop-invoice">
					<view class="v-title flex">全部筛选</view>
					<view class="flex-columns v-type-content">
						<text>分类</text>
						<view class="flex-wrap">
							<block v-for="(i, j) in classList" :key="j">
								<view @click="checkeBox(i.id)">
									<view class="flex" :class="i.checkCoupon ? 'v-buy-type2' : 'v-buy-type3'">
										{{ i.title }}</view>
								</view>
							</block>
						</view>
					</view>
					<view class="flex-columns v-type-content">
						<text>平台</text>
						<view class="flex-wrap">
							<block v-for="(i, j) in platform" :key="j">
								<view @click="platformClick(i, j)">
									<view class="flex" :class="i.checked ? 'v-buy-type2' : 'v-buy-type3'"
										style="width: 312rpx;">{{ i.title }}</view>
								</view>
							</block>
						</view>
					</view>

					<view class="v-confirm-btn flex" @click="confirm()">完成</view>
				</view>
			</template>
		</sunui-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				// 1销量2时间
				sort: '',
				// 1 升序 2降序（当sort存在，则必传）
				sortDesc: '',
				// 筛选id
				classId: '',
				searchVal: '',
				list: [],
				/* 最后统一用计算属性写 */
				// 按综合
				isAllRound: true,
				// 按时间
				isTime: false,
				isTimeClick: false,
				/* 按销量 */
				isSale: false,
				isSaleClick: false,
				// 行业分类
				classList: [],
				classListTab: [],

				// 平台分类
				platform: [{
						title: '全部',
						checked: true,
						id: ''
					},
					{
						title: '公众号',
						checked: false,
						id: 1
					},
					{
						title: '微信小程序',
						checked: false,
						id: 2
					},
					{
						title: 'APP',
						checked: false,
						id: 3
					},
					{
						title: 'PC',
						checked: false,
						id: 4
					},
					{
						title: 'IOS',
						checked: false,
						id: 5
					},
					{
						title: 'Android',
						checked: false,
						id: 6
					},
					{
						title: '字节跳动小程序',
						checked: false,
						id: 7
					},
					{
						title: '支付宝小程序',
						checked: false,
						id: 8
					},
					{
						title: '百度小程序',
						checked: false,
						id: 9
					}
				],
				payId: '',
				// 是否点击“筛选”完成
				isConfirm: false
			};
		},
		computed: {
			totelName: function() {
				return function(num) {

					if (num >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {
						return num.toString();
					}
				};
			}
		},
		onLoad(options) {

			if (options.title) {
				this.$sun.title(options.title)
			} else {
				this.$sun.title('搜索')
			}
			if (options.id) {
				this.classId = options.id;
			}

			this.getclassListTab();
		},

		methods: {
			getChange(index, id) {
				console.log(index)
				this.tabIndex = index;
				this.classId = id;
				this.mescroll.resetUpScroll();
			},
			// '普通商品'详情
			toDetail(id) {
				this.$sun.navGo('/pages/detail/detail', {
					goods_id: id
				});
			},
			async getclassListTab() {
				const result = await this.$http.get({
					url: this.$api.navigation
				});

				if (result.errno == 0) {
					this.classListTab = result.data.map((item) => {
						return {
							name: item.name,
							id: item.id,

						}
					});
					this.classListTab.unshift({
						name:'全部',
						id: 0,
					})

					const index = this.classListTab.findIndex(item => item.id == this.classId);
					this.tabIndex = index
					console.log(this.classListTab, index, this.classId)
				}
			},
			// “筛选” 弹出框
			invoice() {
				this.$refs.popinvoice.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: true, //false使用户不能点击其它关闭页面
					topclose: false
				});
			},
			checkeBox(id) {
				this.classId = id;
				this.classList.filter(x => {
					if (id == x.id) {
						x.checkCoupon = x.checkCoupon == true ? false : true;
					} else {
						x.checkCoupon = false;
					}
				});
			},
			// 选择 “平台 ” 需修改
			platformClick(i, j) {
				for (let n = 0; n < this.platform.length; n++) {
					this.platform[n].checked = false;
				}
				i.checked = !i.checked;
				this.payId = this.platform[j].id;
				console.log(this.payId)
			},
			// "筛选"完成
			confirm() {
				this.isConfirm = true;
				if (this.classId) {
					// this.upCallback(this.mescroll);
					this.mescroll.resetUpScroll();
					this.$refs.popinvoice.close();
				} else {
					this.$sun.toast('请选择你要筛选的分类');
				}
			},
			// 综合
			allRound() {
				// 1销量2时间
				this.sort = '';
				// 1 升序 2降序（当sort存在，则必传）
				this.sortDesc = '';

				this.isAllRound = true;

				this.isSaleClick = false;
				this.isSale = false;
				this.isTimeClick = false;
				this.isTime = false;
				// this.upCallback(this.mescroll);
				this.mescroll.resetUpScroll();
			},
			// 按时间
			time() {
				this.isTimeClick = true;
				this.isTime = !this.isTime;

				// 1销量2时间
				this.sort = 2;
				// 1 升序 2降序（当sort存在，则必传）
				this.sortDesc = this.isTime == true ? 1 : 2;

				this.isAllRound = false;

				this.isSaleClick = false;
				this.isSale = false;
				// this.upCallback(this.mescroll);
				this.mescroll.resetUpScroll();
			},
			// 按销量
			sale() {
				this.isSaleClick = true;
				this.isSale = !this.isSale;

				// 1销量2时间
				this.sort = 1;
				// 1 升序 2降序（当sort存在，则必传）
				this.sortDesc = this.isSale == true ? 1 : 2;

				this.isTimeClick = false;
				this.isTime = false;
				this.isAllRound = false;
				// this.upCallback(this.mescroll);
				this.mescroll.resetUpScroll();
			},
			// 食品获取分类
			async getCateList() {
				const result = await this.$http.get({
					url: this.$api.getCate
				});
				if (result.code == 0) {
					this.classList = result.data.list;
					this.classList.filter((item, i) => {
						if (this.classId) {
							if (item.id == this.classId) {
								this.$set(item, 'checkCoupon', true);
							} else {
								this.$set(item, 'checkCoupon', false);
							}
						} else {
							if (i == 0) {
								this.$set(item, 'checkCoupon', true);
								this.classId = item.id;
							} else {
								this.$set(item, 'checkCoupon', false);
							}
						}
					});
				}
			},
			// 根据分类搜索“普通商品”
			async upCallback(scroll) {
				// 1销量2时间
				let dynamicKey= this.sort==1?'sold':'create_time'
				
				
				
				let requestData = {
				    page: scroll.num,
				    psize: 10,
				    name: this.searchVal,
				    category_id: this.classId ? this.classId : 0,
				    // is_recommend:this.isAllRound?1:'',
				    // 使用动态的 key 和动态的 type
				    [dynamicKey]: this.sortDesc, // 这里动态地使用了 [dynamicKey] 来作为属性名
				    
				   
				};
				const result = await this.$http.get({
					url: this.$api.goodsList,
					data: requestData
				});
				console.log(this.payId, '========')
				if (result.errno == 0) {
					this.mescroll.endByPage(result.data.list.length, result.totalPage);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
				}
			},

			//监听输入框输入的值
			changeInput() {},
			//确定输入键盘的搜索
			changeSearch() {
				this.mescroll.resetUpScroll();
				// this.upCallback(this.mescroll);
			},
			// 输入框清空
			close() {
				this.searchVal = '';
				this.mescroll.resetUpScroll();
				// this.upCallback(this.mescroll);
			}
		}
	};
</script>

<style lang="less">
	.v-search-page {
		.search-content {
			background: #eceaea;
			margin: 20rpx;
			height: 76rpx;
			border-radius: 130rpx;

			background: rgb(255, 255, 255);

			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin: 0 10rpx 0 30rpx;
			}

			input {
				flex: 1;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 37rpx;
				height: 37rpx;
			}
		}

		.v-p-top {
			padding: 10rpx 0 20rpx;

			.v-text-icon {
				height: 40rpx;

				.icon-top {
					margin-top: -6rpx;
				}

				.v-icon-color {
					color: #d9d9d9;
					margin-left: 6rpx;
					font-size: 18rpx;
				}

				.v-icon-select {
					color: #ff3326;
					margin-left: 6rpx;
					font-size: 18rpx;
				}
			}

			.v-screen {
				color: #8f8f8f;

				text {
					margin-left: 12rpx;
					font-size: 26rpx;
				}
			}
		}

		.v-commodity {
			width: 342rpx;
			margin: 0 0 40rpx 20rpx;

			image {
				// margin-bottom: 24rpx;
				width: 342rpx;
				height: 342rpx;
			}

			.v-commission {
				margin: 12rpx 0 20rpx;

				view {
					color: #ff5f4e;
					font-size: 24rpx;
					padding: 8rpx 16rpx;
					background: #ffe4e1;
					border: 2rpx solid #ff5f4e;
				}
			}

			.v-sale {
				color: #8f8f8f;
				font-size: 24rpx;

				text {
					margin-left: 16rpx;
				}
			}

			.v-price {
				margin-top: 34rpx;

				view {
					color: #ff0000;
					font-size: 36rpx;
				}

				text {
					color: #bdbdbd;
				}
			}

			.v-shareing {
				padding: 6rpx 16rpx;
				background: #fff7d1;
				border-radius: 100rpx;

				text {
					color: #fe9a31;
					font-size: 24rpx;
					padding-left: 6rpx;
				}
			}
		}

		// 筛选
		.v-pop-invoice {
			background: #ffffff;
			border-radius: 10rpx 10rpx 0 0;
			padding: 34rpx 0 50rpx;

			.v-title {
				font-size: 32rpx;
				// font-weight: bold;
				margin-bottom: 56rpx;
			}

			.v-type-content {

				// margin: 0 20rpx;
				text {
					padding: 26rpx 30rpx 32rpx;
				}

				.v-buy-type,
				.v-buy-type2,
				.v-buy-type3 {
					margin: 0 30rpx 36rpx 24rpx;
					width: 192rpx;
					height: 68rpx;
					border-radius: 100rpx;
				}

				.v-buy-type {
					color: #294d7d;
					border: 2rpx solid #294d7d;
					background: #e1ecff;
					// padding: 14rpx 44rpx;
				}

				.v-buy-type2 {
					color: #294d7d;
					background: #e1ecff;
					border: 2rpx solid #e5e5e5;
					// padding: 14rpx 56rpx;
				}

				.v-buy-type3 {
					border: 2rpx solid #f5f5f5;
					background: #f5f5f5;
					// padding: 14rpx 56rpx;
				}
			}

			.v-confirm-btn {
				width: 100%;
				height: 112rpx;
				background: #294d7d;
				color: #ffffff;
				font-size: 36rpx;
				font-weight: bold;
				margin-top: 36rpx;
			}
		}
	}
</style>